<template>
  <div id="app">
    <keep-alive>
      <router-view
        @set-date="setDate"
        :duration="duration"
        @set-play-music="playMusic"
        :key="$route.fullPath"
        @change-popup-show="changePopupShow"
        :src="src"
        :play-status="playStatus"
        @set-play-status="togglePlayIcon"
      />
    </keep-alive>

    <div class="tab-bar">
      <router-link
        :to="'/home/' + date"
        class="tab-bar-item icon-home"
      ></router-link>
      <router-link
        to="/discover"
        class="tab-bar-item icon-discover"
      ></router-link>
      <router-link
        to="/serialize"
        class="tab-bar-item icon-serialize"
      ></router-link>
      <router-link
        to="/login"
        class="tab-bar-item icon-mine"
      ></router-link>
    </div>
    <audio
      v-if="src"
      :src="src"
      ref="audio"
      @canplay="getAudioMetaSource"
      @timeupdate="audioTimeupdate"
    />
    <wd-popup
      v-model="popupShow"
      position="top"
      :style="{ 'height': '200px' }"
      hide-label
    >
      <div
        class="slider"
        v-if="popupShow"
      >
        <p class="title">{{title}}</p>
        <wd-slider
          v-model="durationVal"
          :min="0"
          :max="100"
          inactiveColor
          hide-label
          hide-min-max
        ></wd-slider>
        <div class="time">
          <p>{{filterCurrentTime}}</p>
          <p>{{filterTime}}</p>
        </div>
        <p class="anchor">{{anchor}}</p>
        <div class="icon-play-pause">
          <i></i>
          <i
            class="icon-play"
            @click="togglePlayIcon"
            :class="playStatus==true?'icon-pause':'icon-play'"
          ></i>
          <i></i>
        </div>
        <div class="icon-other">
          <i></i>
          <div class="icon-other-item">
            <i></i>
            <i @click="goArticle"></i>
          </div>
        </div>
      </div>
    </wd-popup>

    <transition name="move">
      <div
        class="player"
        v-show="discShow"
        :style="{backgroundImage:`url(${discImageArr[currentIndex]})`}"
        @click="popupShow=true"
      >
      </div>
    </transition>
  </div>
</template>
  <script>
import { discImageArr } from "../src/utils/playerImageArr";
import { filterDuration } from "../src/utils/dateTools";
// import { debounce } from "lodash-es"
export default {
  props: {
    // src:String
  },
  data() {
    return {
      date: 0,
      src: "", // 接收子元素传过来的audio音频路径
      duration: 0, //总时长
      currentTime: 0, // 获取当前播放的时长
      playStatus: false, // 默认播放的状态为false
      discImageArr, // player存储的帧数图片数组
      discShow: false,
      currentIndex: 0, // 定义当前帧数图片的索引
      discTimer: null, // 默认定时器为null
      popupShow: false, // 默认弹出层不显示
      val: 0, // 滑块值
      title: "", // 接收子元素传过来的title值
      anchor: "", // 接收子元素传过来的anchor值
      detailPath: "",
      audioPlayStatus: false,
    };
  },
  mounted() {
    // console.log(this.src);
    // this.playMusic = debounce(this.playMusic)
  },
  computed: {
    filterTime() {
      return filterDuration(this.duration);
    },
    filterCurrentTime() {
      return filterDuration(this.currentTime);
    },
    // 通过计算总时长与当前播放时长监听滑块的值
    durationVal: {
      get() {
        if (this.duration && this.currentTime) {
          return Math.ceil((this.currentTime * 100) / this.duration);
        }
        return 1;
      },
      set(value) {
        console.log("修改的值", value);
        let num = Math.ceil((value * this.duration) / 100);
        this.$refs.audio.currentTime = num;
        // this.currentTime = num;
        return this.$refs.audio.currentTime;
      },
    },
  },
  methods: {
    setDate(dateStr) {
      this.date = dateStr;
    },
    // 在音频播放时获取元数据
    getAudioMetaSource() {
      this.duration = this.$refs.audio.duration;
      // console.log(this.duration);
    },
    // 播放音频时获取当前播放时长
    audioTimeupdate() {
      this.currentTime = this.$refs.audio.currentTime;
      // console.log(this.currentTime);
    },
    // 点击播放音频
    playMusic({ audio, title, anchor, detailPath }) {
      this.src = audio;
      this.discShow = true;
      this.playStatus = true;
      this.title = title;
      this.anchor = anchor;
      this.detailPath = detailPath;
      // 等页面全部渲染完毕，才开启disc切图动画
      this.$nextTick(() => {
        this.discAnimation();
        this.$refs.audio.play();
        // this.$refs.audio.load();
      });
    },
    // 定义disc动画,播放时，开启切图动画
    discAnimation() {
      this.discTimer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.discImageArr.length;
      }, 30);
    },
    // 切换播放和暂停图标以及音频
    togglePlayIcon() {
      this.playStatus = !this.playStatus;
      // this.audioPlayStatus = !this.audioPlayStatus;
      if (this.playStatus) {
        this.$refs.audio.play();
      }
      if (!this.playStatus) {
        this.$refs.audio.pause();
      }
    },
    // 回到朗读文章的路由
    goArticle() {
      if (this.$route.fullPath != this.detailPath) {
        this.$router.push(this.detailPath);
        this.playStatus = true;
      }
      this.popupShow = false;
    },
    // 修改电台传过来的值
    changePopupShow({
      audio,
      title,
      anchor,
      duration,
      currentTime,
    }) {
      this.$nextTick(() => {
        this.src = audio;
        this.duration = duration;
        this.currentTime = currentTime;
        this.title = title;
        this.anchor = anchor;
        this.discShow = true;
        // this.audioPlayStatus = audioPlayStatus;
        this.playStatus = true;
        // console.log(audio, title, anchor, duration, currentTime, detailPath);
        this.$refs.audio.load();
        // this.$refs.audio.load();
        this.$refs.audio.play();
      });
    },
    
  },
  // 组件销毁之前，清空计时器
  beforeDestroy() {
    if (this.discTimer) {
      clearInterval(this.discTimer);
    }
  },
};
</script>
<style lang=scss scoped>
#app {
  ::-webkit-scrollbar {
    width: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
.tab-bar {
  width: 100vw;
  height: 50px;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  /* z-index:222; */
  background-color: white;

  .tab-bar-item {
    flex: 1;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center center;
    &.icon-home {
      background-image: url("./assets/img/tabbar/icon_home.png");
    }
    &.icon-discover {
      background-image: url("./assets/img/tabbar/icon_dicover.png");
    }
    &.icon-serialize {
      background-image: url("./assets/img/tabbar/icon_serial.png");
    }
    &.icon-mine {
      background-image: url("./assets/img/tabbar/icon_me.png");
    }
    &.router-link-active {
      &.icon-home {
        background-image: url("./assets/img/tabbar/icon_home_selected.png");
      }
      &.icon-discover {
        background-image: url("./assets/img/tabbar/icon_discover_selected.png");
      }
      &.icon-serialize {
        background-image: url("./assets/img/tabbar/icon_serial_selected.png");
      }
      &.icon-mine {
        background-image: url("./assets/img/tabbar/icon_me_selected.png");
      }
    }
  }
}
.player {
  position: fixed;
  top: 10vh;
  right: 0;
  width: 40px;
  height: 40px;
  background-image: url("../src/assets/img/float_player/float_player_pause.png");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1111;
}
.slider {
  position: relative;
  padding: 20px 15px 0;
  color: rgb(189, 184, 184);
  z-index: 20222;

  /* .wd-slider__bar {
    background: linear-gradient(315deg, #000000 0, #121212 100%) !important;
  }
  .wd-slider__button {
    width: 12px!important;
    height: 12px!important;
  } */
  .time {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  .anchor,
  .title {
    margin-bottom: 10px;
    text-align: center;
  }
  .anchor {
    font-size: 12px;
    color: #d6d3d3;
  }
  .icon-play-pause {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .icon-play {
      background-image: url("@/assets/img/play/player_play.png");
    }
    .icon-pause {
      background-image: url("@/assets/img/play/player_pause.png");
    }
    i {
      width: 33px;
      height: 33px;
      background-repeat: no-repeat;
      background-size: cover;
    }
    & i:nth-child(1) {
      background-image: url("@/assets/img/play/last.png");
    }
    & i:nth-child(2) {
    }
    & i:nth-child(3) {
      background-image: url("@/assets/img/play/next.png");
    }
  }
  .icon-other {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    i {
      width: 22px;
      height: 22px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("@/assets/img/play/player_all_cycle.png");
    }

    .icon-other-item {
      display: flex;
      justify-content: space-between;
      i {
        background-image: url("@/assets/img/play/music_collection_night.png");
        &:nth-child(2) {
          margin-left: 20px;
          background-image: url("@/assets/img/play/detail_content.png");
        }
      }
    }
  }
}
.move-enter,
.move-leave-to {
  transform: translateX(100%);
}
.move-enter-active,
.move-leave-active {
  transition: all 0.3s linear;
}
.move-enter-to,
.move-leave-enter {
  transform: translateX(0%);
}
</style>
